<template>
	<view class="dynamicbox">
		<custom-tarbar class="customtarbar" :class="scrollTop >= cbTop ? 'newcomtarbar' : ''">
			<template #left>
				<!-- <view class="back" ><image src="../../static/images/dynamic/back-white.png" mode="widthFix"></image></view> -->
				<view class="back_white" @tap="goFind" v-show="scrollTop < cbTop"><image src="../../../static/images/dynamic/back-white.png" mode="widthFix"></image></view>
				<view class="back" @tap="goFind" v-show="scrollTop >= cbTop"><image src="../../../static/images/dynamic/back-black.png" mode="widthFix"></image></view>
			</template>
			<template #center>
				<view class="title" v-if="scrollTop >= cbTop">
					<view>{{ name }}的空间</view>
				</view>
			</template>
			<template #right>
				<view v-show="id == getUser._id" @tap="goEdit" class="info" v-if="scrollTop >= cbTop">
					<image src="../../../static/images/dynamic/camera-black.png" mode="widthFix"></image>
				</view>
				<view v-show="id == getUser._id" @tap="goEdit" class="info" v-else><image src="../../../static/images/dynamic/camera-white.png" mode="widthFix"></image></view>
			</template>
		</custom-tarbar>
		<scroll-view scroll-y="true" @scroll="onScroll" @scrolltolower="toLower" :scroll-top="scrollTop">
			<view class="dynamic">
				<view class="content">
					<view class="c_top">
						<view class="bg"><image :src="avatars" mode="aspectFill"></image></view>
						<!-- <view class="bg"><image src="../../static/images/img/one.png" mode="aspectFill"></image></view> -->
						<view class="mask"></view>
						<view class="imgbox">
							<view class="img"><image :src="avatars" mode="aspectFill"></image></view>
						</view>
						<view class="tabbox">
							<view class="tabinner">
								<view class="tabitem dongtai" :class="tabindex == 0 ? 'active' : ''" @tap="tab(0)">动态</view>
								<view class="tabitem tongzhi" :class="tabindex == 1 ? 'active' : tabindex == 0 ? 'noselect' : ''" @tap="tab(1)">留言</view>
								<view v-if="id == getUser._id" class="tabitem liuyan" :class="tabindex == 2 ? 'select' : tabindex == 3 ? 'lynoselect' : ''" @tap="tab(2)">
									访客
								</view>
								<view v-if="id == getUser._id" class="tabitem fangke" :class="tabindex == 3 ? 'fselect' : ''" @tap="tab(3)">通知</view>
							</view>
						</view>
					</view>
					<view id="content_box">
						<view class="dynamic" v-show="tabindex == 0">
							<template v-if="getSocial.length > 0">
								<view class="content_item" v-for="(item, mapIndex) in getSocial" :key="mapIndex">
									<template v-if="item.id">
										<view class="c_middle">
											<view class="c_item">
												<view class="c_item_left">
													<view><image lazy-load="true" :src="item.avatars" mode="aspectFill"></image></view>
												</view>
												<view class="c_item_right">
													<view class="c_item_name">{{ item.nickName }}</view>
													<view class="delete" @tap="deleteLog(item.date)">
														<view class="m_del_box" v-if="getUser._id == id">
															<image src="../../../static/images/dynamic/delete.png" mode="widthFix"></image>
														</view>
													</view>
													<rich-text :nodes="item.text"></rich-text>
													<view class="image_box">
														<view
															:class="item.imgList.length > 1 ? 'image_outter' : 'image_outer2'"
															v-for="(item2, index) in item.imgList"
															:key="index"
														>
															<image @tap="previewImg(item.originalList, index)" lazy-load="true" :src="item2" mode="aspectFill"></image>
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="address" v-if="item.address != ''">{{ item.address }}</view>
										<view class="c_other">
											<view class="c_other_time">{{ item.date | dateFormat }}</view>
											<view class="c_other_zk" :class="mapIndex == index ? 'show' : ''">
												<view class="clbtn">
													<view @tap="giveALike(item.id, item.date)"><image src="../../../static/images/dynamic/dz.png" mode="widthFix"></image></view>
													<view @tap="openComment({ type: 'comment', id: item.id, date: item.date, toUser: item.id, toName: item.nickName })">
														<image src="../../../static/images/dynamic/pl.png" mode="widthFix"></image>
													</view>
												</view>
												<view class="m_btn" @tap="handler(mapIndex)">
													<view class="m_btn_box"><image src="../../../static/images/userhome/more.png" mode="widthFix"></image></view>
												</view>
											</view>
										</view>
										<view class="like_comment" v-if="item.like.length > 0 || item.comments.length > 0">
											<view class="like_box" v-if="item.like.length > 0">
												<view class="aixin">♡</view>
												<view v-for="(item4, index4) in item.like" :key="index4 + 'like'">{{ item4.nickName }}</view>
											</view>
											<view class="comment_box" v-if="item.comments.length > 0">
												<view
													class="comment_item"
													@tap="openComment({ type: 'comment', toUser: com.fromUser, toName: com.fromName })"
													v-for="(com, comIndex) in item.comments"
													:key="comIndex + 'com'"
												>
													<view class="com_name">{{ com.fromName }}</view>
													<view class="huifu" v-if="com.toUser != item.id">回复</view>
													<view class="toUser" v-if="com.toUser != item.id">{{ com.toName }}</view>
													<view class="com_content">：{{ com.content }}</view>
												</view>
												<view class="c_ohter" v-if="item.comCount>6">
													<view class="c_sl">...</view>
													<view class="c_info" @tap="goSingleDynamic(item.id,item.date)">详情>></view>
												</view>
											</view>
										</view>
									</template>
								</view>
							</template>
							<template v-else>
								<view class="tishi">该好友未发表动态</view>
							</template>
						</view>
						<view class="message" v-if="tabindex == 1"><message :messages="messages" :id="id" @showInput="openComment"></message></view>
						<view class="visitors" v-if="tabindex == 2"><visitor></visitor></view>
						<view class="notify" v-if="tabindex == 3">
							<template v-for="(item, index) in getComNotify">
								<view class="com_box" v-if="item.type == 'like'" :key="index">
									<view class="box_top">
										<view class="user" @tap="goInformation(item.fromUser)">{{ item.fromName }}</view>
										<view class="text">赞了你的动态</view>
									</view>
									<view class="box_middle">
										<view class="innerbox">
											<view class="m_user">{{ getUser.name }}:</view>
											<view class="m_text">{{ item.text }}</view>
										</view>
									</view>
									<view class="box_bottom">
										<view class="date">{{ item.date | dateFormat }}</view>
										<view class="btn">
											<view class="delete_btn" @tap="deleteNotify(item)">
												<image src="../../../static/images/dynamic/delete.png" mode="widthFix"></image>
											</view>
											<view class="info_btn" @tap="goSingleDynamic(item.id,item.logDate)">详情>></view>
										</view>
									</view>
									<view class="tip">
										<image v-if="!item.unRead" src="../../../static/images/dynamic/new.png" mode="widthFix"></image>
										<image v-else src="../../../static/images/dynamic/read.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="com_box" v-if="item.type == 'comment'" :key="index">
									<view class="box_top">
										<view class="user" @tap="goInformation(item.fromUser)">{{ item.fromName }}</view>
										<view class="text">回复</view>
										<view class="user" v-if="item.toUser != getUser._id" @tap="goInformation(item.toUser)">{{ item.toName }}</view>
										<view class="text" v-else>我</view>
										<view class="text">:</view>
									</view>
									<view class="com_conten">{{ item.content }}</view>
									<view class="box_middle">
										<view class="innerbox">
											<view class="m_user">{{ getUser.name }}:</view>
											<view class="m_text">{{ item.text }}</view>
										</view>
									</view>
									<view class="box_bottom">
										<view class="date">{{ item.date | dateFormat }}</view>
										<view class="btn">
											<view class="delete_btn" @tap="deleteNotify(item)">
												<image src="../../../static/images/dynamic/delete.png" mode="widthFix"></image>
											</view>
											<view class="info_btn" @tap="goSingleDynamic(item.id,item.logDate)">详情>></view>
										</view>
									</view>
									<view class="tip">
										<image v-if="!item.unRead" src="../../../static/images/dynamic/new.png" mode="widthFix"></image>
										<image v-else src="../../../static/images/dynamic/read.png" mode="widthFix"></image>
									</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<comment v-if="showComment" class="comment" @comment="comment"></comment>
		<topicon
			class="topicon"
			:iconWidth="80"
			:iconHeight="80"
			:startPostion="3"
			iconPath="http://www.yemengs.cn/common/top.png"
			:marginBottom="0"
			:marginTop="60" 
			:marginLeft="5"
			:marginRight="5"
			@tapIcon="tapIcon"
			v-if="scrollTop > 500"
		></topicon>
	</view>
</template>

<script>
import CustomTarbar from '../../../components/customtarbar/customtarbar.vue';
import comment from '../../../components/comment/comment.vue';
import topicon from '../../../components/gwh-backTopIcon/gwh-backTopIcon.vue';
import visitor from './visitor/visitor.vue';
import message from './message/message.vue';

import request from '../../../api/request.js';

import { mapGetters } from 'vuex';

export default {
	data() {
		return {
			scrollTop: 0, //滚动距离
			cbTop: 0, //content_box区域距离顶部的距离
			index: -1, //记录当前点击的是那个...按钮
			showComment: false, //控制comment组件显示的标识
			flag: true, //在滚动过程中是否显示comment组件的标识
			flagIndex: 0, //计算scroll-view滚动的次数，与flag搭配使用，解决bug
			social: [], //朋友圈数组
			id: null, //空间主人的id
			date: null, //动态的时间
			toUser: null, //评论时回复谁 id
			toName: null, //评论时回复谁 name
			page: 1, //分页：当前页
			limit: 15, //分页：每页的条数
			tabindex: 0, //模块切换
			avatars: null, //当前空间的用户头像
			name: null, //当前空间的用户名
			type: null, //当前提交的类型：评论||留言
			mess_page: 1,
			mess_limit: 15,
			messages: [],
			params: {}
		};
	},
	components: {
		CustomTarbar,
		comment,
		topicon,
		visitor,
		message
	},
	onLoad(options) {
		let { id, tabindex } = options;
		this.id = id;
		if (this.id != this.getUser._id) {
			//访问者访问用户空间
			// 记录访客
			this.$store.dispatch('recordVisitor', this.id);
		} else {
			//获取访客
			this.$store.commit('changeVisiPage', 1);
			this.$store.dispatch('acquireVisitors');
		}
		if (tabindex) {
			this.tabindex = tabindex;
		}
		this.acquire();
		this.acquireMessage();
	},
	watch: {
		social: {
			//深度监听social
			deep: true,
			handler: function(val, oldval) {}
		}
	},
	computed: {
		...mapGetters(['getUser', 'getDyNotify', 'getUnReadNotify', 'getComNotify']),
		getSocial() {
			//结合watch来监听social的改变
			return this.social;
		}
	},
	mounted() {
		this.getScrollTop();
		uni.$on('refreshSocial', () => {
			//发表动态时刷新数据
			this.page = 1;
			this.social = [];
			this.acquire();
		});
	},
	// 下拉刷新
	async onPullDownRefresh() {
		this.page = 1;
		this.social = [];
		this.acquire();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		let res = await request({
			url: '/dynamic/notify/remove',
			data: {
				token: uni.getStorageSync('token')
			},
			method: 'POST'
		});
		this.$store.dispatch('getDyNotify');
	},
	methods: {
		// 监听滚动距离
		onScroll(e) {
			this.index = -1;

			// 解决comment组件因为滚动自动消失的bug
			if (this.flag == true) {
				this.flagIndex++;
				if (this.flagIndex >= 4) {
					this.flag = false;
					this.flagIndex = 0;
				}
			} else {
				this.showComment = false;
				this.flag = true;
			}
			this.scrollTop = e.detail.scrollTop;
		},
		// 获取content_box区域距离顶部的距离
		getScrollTop() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#content_box')
				.boundingClientRect(data => {
					this.cbTop = data.top - 40;
				})
				.exec();
		},
		// 点击...按钮触发的事件
		handler(index) {
			// console.log(index,this.index)
			if (this.index == index) {
				this.index = -1;
			} else {
				this.index = index;
			}
		},
		// 点赞触发的事件
		async giveALike(id, date) {
			this.index = -1;
			// 本地添加数据
			this.social.map(item => {
				if (new Date(item.date).getTime() == new Date(date).getTime()) {
					// 判断点赞数组中是否存在该用户
					let index = item.like.findIndex(item => {
						//通过或来判断，因为存到数据库是存的id,本地存的是name
						return item.id == this.getUser._id;
					});
					if (index == -1) {
						//如果不存在则添加
						item.like.unshift({ id: this.getUser._id, nickName: this.getUser.name });
					} else {
						//存在则删除
						item.like.splice(index, 1);
					}
				}
				return item;
			});
			// 向服务器发送数据
			let res = await request({
				url: '/dynamic/like',
				data: {
					token: uni.getStorageSync('token'),
					id,
					date
				},
				method: 'POST'
			});
		},
		// 评论
		async comment(content) {
			this.showComment = false;
			if (this.type == 'comment') {
				// 本地添加数据
				this.social.map(item => {
					if (new Date(item.date).getTime() == new Date(this.date).getTime()) {
						item.comments.unshift({
							fromUser: this.getUser._id,
							fromName: this.getUser.name,
							toUser: this.toUser,
							toName: this.toName,
							content
						});
					}
					return item;
				});

				// 向服务器发送数据记录新评论
				let res = await request({
					url: '/dynamic/comment',
					data: {
						token: uni.getStorageSync('token'),
						id: this.id,
						date: this.date,
						toUser: this.toUser,
						toName: this.toName,
						content
					},
					method: 'POST'
				});
			} else {
				if (this.params.messageID) {
					//回复
					let res = await request({
						url: '/message/reply',
						data: {
							token: uni.getStorageSync('token'),
							id: this.id,
							messageID: this.params.messageID,
							date: this.params.date,
							content,
							message: this.params.message
						},
						method: 'POST'
					});
					if (res[1].data.status) {
						// 本地添加数据，避免刷新页面
						let index = this.messages.findIndex(item => {
							return this.params.messageID.toString() == item.user._id.toString() && new Date(item.date).getTime() == new Date(this.params.date).getTime();
						});
						this.messages[index].children.unshift({
							user: {
								_id:this.getUser._id,
								avatars:this.getUser.avatars
							},
							name: this.getUser.name,
							date: new Date(),
							content
						});
					}
				} else {
					let res = await request({
						//新留言
						url: '/message/published',
						data: {
							token: uni.getStorageSync('token'),
							id: this.id,
							content
						},
						method: 'POST'
					});
					if (res[1].data.status) {
						// 本地添加数据，避免刷新页面
						this.messages.unshift({
							user: {
								_id:this.getUser._id,
								avatars:this.getUser.avatars
							},
							content,
							nickName: this.getUser.name,
							children: [],
							date: new Date()
						});
					}
				}
			}
		},
		// 打开评论组件
		openComment(data) {
			let { type } = data;
			this.type = type;
			if (type == 'comment') {
				this.date = data.date;
				this.toUser = data.toUser;
				this.toName = data.toName;
			} else {
				this.params = data;
			}

			this.index = -1;
			this.showComment = true;
		},
		// 跳转到编辑页
		goEdit() {
			uni.navigateTo({
				url: '../edit/edit?path=individual'
			});
		},
		// 返回上一页
		goFind() {
			uni.navigateBack({
				delta: 1
			});
			// uni.navigateTo({
			// 	url:"../dynamic"
			// })
		},
		// 获取个人动态
		async acquire() {
			let res = await request({
				url: '/dynamic/acquire',
				data: {
					token: uni.getStorageSync('token'),
					id: this.id,
					limit: this.limit,
					page: this.page
				}
			});
			let logList = res[1].data.logList;
			this.avatars = res[1].data.avatars;
			this.name = res[1].data.name;
			if (logList.length > 0) {
				this.social.push(...logList);
			}
		},
		// 预览图片
		previewImg(imglist, index) {
			uni.previewImage({
				urls: imglist,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						// console.log(err.errMsg);
					}
				}
			});
		},
		// 加载更多
		toLower() {
			this.page++;
			this.acquire();
		},
		// 模块切换
		tab(index) {
			this.tabindex = index;
			if (index == 4) {
				this.updateCom();
			}
		},
		// 返回顶部
		tapIcon(e) {
			this.scrollTop = 0;
		},
		// 删除动态
		deleteLog(date) {
			uni.showModal({
				title: '提示',
				content: '确定删除该动态吗',
				success: async res => {
					if (res.confirm) {
						let res = await request({
							url: '/dynamic/delete',
							data: {
								date,
								token: uni.getStorageSync('token')
							},
							method: 'POST'
						});
						res = res[1].data;
						if (res.status == 1) {
							// 本地删除数据 ,为了不刷新数据造成scroll-view跳转的情况
							let index = this.social.findIndex(item => {
								return new Date(item.date).getTime() == new Date(date).getTime();
							});
							if (index > -1) {
								this.social.splice(index, 1);
							}
							uni.$emit('refresh'); //刷新数据
						}
					} else if (res.cancel) {
					}
				}
			});
		},
		// 更新评论通知表
		async updateCom() {
			let res = await request({
				url: '/comment/update',
				data: {
					token: uni.getStorageSync('token')
				},
				method: 'POST'
			});
		},
		// 获取留言
		async acquireMessage() {
			let res = await request({
				url: '/message/acquire',
				data: {
					token: uni.getStorageSync('token'),
					id: this.id,
					page: this.mess_page,
					limit: this.mess_limit
				}
			});
			this.messages = res[1].data.messages;
		},
		// 去好友详情页面
		goInformation(id) {
			if (this.getUser._id != id) {
				uni.navigateTo({
					url: '../../information/information?id=' + id
				});
			}
		},
		//动态详情
		goSingleDynamic(id,date){
			uni.navigateTo({
				url: "../sigledynamic/sigledynamic?id="+id+"&&date="+date
			});
		},
		// 删除通知
		async deleteNotify(item) {
			uni.showModal({
				title: '提示',
				content: '确定删除该通知吗？',
				success: async res => {
					if (res.confirm) {
						let res = await request({
							url: '/comment/remove',
							data: {
								token: uni.getStorageSync('token'),
								formUser: item.fromUser,
								date: item.date
							},
							method: 'POST'
						});
						if (res[1].data.status) {
							uni.showToast({
								title: res[1].data.msg,
								duration: 1000
							});
							this.$store.dispatch('getComNotify');
						}
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../commons/css/mycss.scss';
.dynamicbox {
	height: 100vh;
	margin-top: var(--status-bar-height);
	scroll-view {
		height: 100%;
	}
}
.box-top {
}
.customtarbar {
	position: fixed;
	top: var(--status-bar-height);
	right: 0;
	left: 0;
	height: 88rpx;
	z-index: 9999;
	.back_white {
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 46rpx;
			height: 100%;
		}
	}
	.back {
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 46rpx;
			height: 100%;
		}
	}
	.title {
		line-height: 88rpx;
		padding: 0rpx 20rpx;
		view {
			display: inline-block;
		}
	}
	.info {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 20rpx;
		image {
			width: 60rpx;
			height: auto;
		}
	}
}
.comtarbar {
	.info {
		margin-left: 30rpx;
	}
}
// .comment{

// }
.dynamic {
	// padding-top: var(--status-bar-height);
	// box-sizing: border-box;
	.content {
		padding-bottom: 40rpx;
		position: relative;
	}
	.c_top {
		width: 100vw;
		height: 40vh;
		position: relative;
		.bg {
			position: absolute;
			width: 100vw;
			height: calc(100% + 88rpx);
			left: 0;
			bottom: 0;
			overflow: hidden;
			z-index: 1;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.mask {
			position: absolute;
			height: calc(100% + 88rpx);
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}
		.imgbox {
			height: 120rpx;
			// width: 300rpx;
			position: absolute;
			right: 30rpx;
			bottom: -20rpx;
			display: flex;
			justify-content: flex-end;
			z-index: 100;
			.name {
				height: 120rpx;
				line-height: 120rpx;
				color: white;
				padding-right: 10rpx;
			}
			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;
				border: 2rpx solid #ffffff;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.tabbox {
			position: absolute;
			z-index: 100;
			bottom: -10rpx;
			left: 30rpx;
			.tabinner {
				position: relative;
				.tabitem {
					position: absolute;
					bottom: 0;
					background: rgba(255, 255, 255, 0.6);
					color: #848484;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					font-size: 32rpx;
					height: 60rpx;
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.tongzhi {
					left: 120rpx;
				}
				.liuyan {
					left: 280rpx;
				}
				/* #ifdef APP-PLUS */
				.liuyan {
					left: 278rpx;
				}
				/* #endif */
				.fangke {
					left: 400rpx;
				}
				/* #ifdef APP-PLUS */
				.fangke {
					left: 396rpx;
				}
				/* #endif */
				.active {
					height: 80rpx;
					width: 160rpx;
					color: #1980ce;
					font-size: 38rpx;
				}
				.noselect {
					left: 160rpx;
				}
				.lynoselect {
					left: 240rpx;
				}
				/* #ifdef APP-PLUS */
				.lynoselect {
					left: 238rpx;
				}
				/* #endif */
				.select {
					height: 80rpx;
					left: 240rpx;
					width: 160rpx;
					color: #1980ce;
					font-size: 38rpx;
				}
				/* #ifdef APP-PLUS */
				.select {
					height: 80rpx;
					left: 238rpx;
					width: 160rpx;
					color: #1980ce;
					font-size: 38rpx;
				}
				/* #endif */
				.fselect {
					height: 80rpx;
					left: 360rpx;
					width: 160rpx;
					color: #1980ce;
					font-size: 38rpx;
				}
				/* #ifdef APP-PLUS */
				.fselect {
					height: 80rpx;
					left: 358rpx;
					width: 160rpx;
					color: #1980ce;
					font-size: 38rpx;
				}
				/* #endif */
			}
		}
	}
	.dy_notify {
		margin-top: 40rpx;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		.dy_outerbox {
			display: flex;
			background: #aaaa7f;
			padding: 8rpx 20rpx;
			border-radius: 10rpx;
			.dy_image {
				height: 60rpx;
				width: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				vertical-align: middle;
				image {
					width: 90%;
					height: 90%;
					vertical-align: middle;
					border-radius: 10rpx;
				}
			}
			.dy_text {
				margin-left: 10rpx;
				font-size: 32rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: white;
			}
		}
	}
	.c_middle {
		padding-top: 60rpx;
		.c_item {
			padding: 0rpx 20rpx;
			display: flex;
			.c_item_left {
				width: 130rpx;
				view {
					margin-left: 10rpx;
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.c_item_right {
				width: calc(100% - 120rpx);
				position: relative;
				.c_item_name {
					font-size: 36rpx;
					color: #2054a8;
				}
				.delete {
					position: absolute;
					right: 20rpx;
					top: 0;
					width: 30rpx;
					height: 30rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					font-size: 34rpx;
				}
				.image_box {
					display: flex;
					flex-wrap: wrap;
					margin-top: 16rpx;
					.image_outter {
						width: 190rpx;
						height: 190rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 2rpx;
						overflow: hidden;
						image {
							width: 186rpx;
							height: 186rpx;
						}
					}
					.image_outer2 {
						width: 60%;
						display: flex;
						justify-content: center;
						align-items: center;
						image {
							width: 98%;
						}
					}
				}
			}
		}
	}
	.address {
		padding: 20rpx 40rpx 0rpx 150rpx;
		font-size: 28rpx;
		color: #528ed8;
	}
	.c_other {
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 40rpx 20rpx 150rpx;
		position: relative;
		// background: green;
		.c_other_time {
			font-size: 28rpx;
			color: #ccc;
		}
		.c_other_zk {
			height: 100%;
			text-align: right;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			// background: red;
			position: absolute;
			right: 40rpx;
			top: 0rpx;
			width: 60rpx;
			overflow: hidden;
			.clbtn {
				background: #7a7a7a;
				display: flex;
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				view {
					height: 50rpx;
					width: 70rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.m_btn {
				width: 60rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.m_btn_box {
					height: 34rpx;
					width: 60rpx;
					background: #e7e7e7;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 8rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.show {
			width: 300rpx !important;
		}
	}
	.like_comment {
		margin: 0rpx 40rpx 0rpx 150rpx;
		padding: 4rpx;
		padding-bottom: 10rpx;
		border-radius: 10rpx;
		background: #e5e5e5;
		.like_box {
			display: flex;
			font-size: 30rpx;
			color: #1668ab;
			flex-wrap: wrap;
			view {
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 10rpx;
			}
			.aixin {
				font-size: 40rpx;
			}
		}
	}
	.comment_box {
		margin-top: 4rpx;
		.comment_item {
			font-size: 30rpx;
			padding: 10rpx;
			display: flex;
			.com_name {
				color: #1668ab;
				flex: auto;
			}
			.huifu {
				padding: 0rpx 10rpx;
				flex: auto;
				color: #bebebe;
				font-size: 28rpx;
			}
			.toUser {
				color: #1668ab;
				flex: auto;
			}
			.com_content {
				flex: 60;
				word-wrap: break-word;
				word-break: normal;
			}
		}
		.c_ohter{
			display: flex;
			font-size: 30rpx;
			justify-content: space-between;
			padding: 10rpx 10rpx;
			padding-left: 20rpx;
			.c_sl{
				vertical-align: top;
				line-height: 30rpx;
				height: 30rpx;
			}
			.c_info{
				color: #1668ab;
			}
		}
	}
}
.tishi {
	height: 50vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ccc;
}
.newcomtarbar {
	background: white !important;
	// border-bottom: 2rpx solid #000000;
}

.notify {
	padding: 0rpx 40rpx;
	padding-top: 60rpx;
}
.com_box {
	box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.4);
	padding: 20rpx;
	border-radius: 10rpx;
	margin-bottom: 40rpx;
	position: relative;
	.box_top {
		display: flex;
		font-size: 32rpx;
		padding: 0rpx 20rpx;
		.user {
			color: rgb(21, 125, 181);
		}
		.text {
			padding: 0rpx 10rpx;
			color: #555555;
		}
	}
	.com_conten {
		padding: 10rpx 20rpx 0rpx 60rpx;
		font-size: 32rpx;
	}
	.box_middle {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0rpx;
		.innerbox {
			width: 90%;
			border-radius: 10rpx;
			padding: 20rpx;
			background: #f3f3f3;
			font-size: 32rpx;
			.m_user {
				color: rgb(21, 125, 181);
			}
			.m_text {
				padding-left: 80rpx;
				padding-top: 10rpx;
				color: #555555;
			}
		}
	}
	.box_bottom {
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		color: #cacaca;
		.date {
		}
		.btn {
			display: flex;
			.delete_btn {
				margin-right: 30rpx;
				width: 28rpx;
				vertical-align: bottom;
				image {
					margin-top: 4rpx;
					width: 100%;
					height: auto;
				}
			}
			.info_btn {
				vertical-align: top;
			}
		}
	}
	.tip {
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		image {
			width: 100rpx;
			height: 100%;
		}
	}
}
/deep/ rich-text {
	div {
		font-size: 32rpx;
		word-wrap: break-word;
		word-break: normal;
		color: #555555;
	}
}
</style>
